<template>
	<view class="force-login-wrap">
		<u-mask :show="show_mask" :zoom="false">
			<view class="warp">
				<view class="mask-content bg-img">
					<view class="mask-box">
						<view class="text-them text-center" style="font-size: 36rpx !important;">您还暂未登录</view>
						<view class="text-them margin-top-sm text-center">
							<text class="f28">是否前往登录？</text>
						</view>
						<view class="btn-box " @click="click">
							<text class="mask-btn">确认</text>
							<!-- <navigator url="../../pages/login/login_pas" class="mask-btn" @click="show_mask = false">确认</navigator> -->
						</view>
					</view>
				</view>
				<u-icon style="margin-top: 50rpx;" name="close-circle" color="#ffffff" size="50" @click="shutDn"></u-icon>
			</view>
		</u-mask>
	</view>
</template>

<script>
/**
 * 登录提示页
 * @property {Boolean} value=showLoginTip - 由v-model控制显示隐藏。
 * @property {Boolean} forceOauth - 小程序端特制的全屏登录提示。
 */

export default {
	data() {
		return {
			show_mask:true,
		};
	},
	methods: {
		click(){
			this.show_mask = !this.show_mask
			this.l.to('/pages/login/login_pas')
		},
		shutDn(){
			this.show_mask = false
			this.$u.vuex('vuex_login', 0)
		}
			
	}
};
</script>

<style lang="scss" scoped>
.force-login-wrap{
	position: fixed;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	z-index: 11111;
	top: 0;
	.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		height: 100%;
		.mask-content{
			background-image: url(https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/20210619135313.png);
			background-size: 100%;
			width: 85%;
			min-height: 700rpx;
			.mask-box{
				position: relative;
				top: 300rpx;
				padding: 30rpx;
				.text-them{
					color: #7c633f;
					font-size: 24rpx;
					font-family: PingFang SC, PingFang SC-Medium;
					font-weight: 500;
					line-height: 50rpx;
				}
				.btn-box{
					margin-top: 50rpx;
					text-align: center;
					.mask-btn{
						background: #ec7066;
						border-radius: 40rpx;
						padding: 20rpx 86rpx;
						color: white;
						font-size: 28rpx;
						text-align: center;
						display: inline-block;
					}
				}				
			}
		}
		.icon-btn{
			margin-top: 50rpx;
		}
	}
}
</style>
